import { connect } from 'umi'

import { Layout, Divider } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

import Menus from '../components/route2menu'
import logo from '../assets/logow.svg'
import styles from './index.less';


const BasicLayout = (props) => {
  const { global: { user } } = props;

  if (props.location.pathname === '/login') {
    return <div>{props.children}</div>
  }

  return (
    <>
      <Layout style={{ height: '100vh', overflow: 'hidden' }}>
        <Header className={styles.site_layout_background} style={{ padding: 0 }} >
          <img className={styles.logo} src={logo} alt="logo" />
          <div className={styles.headerBox}>操作员：{user.name} <Divider type="vertical" />锁定屏幕 <Divider type="vertical" /> 退出登录</div>
        </Header>
        <Layout style={{ overflow: 'hidden' }}>
          <Sider className={styles.sider} collapsible theme="dark">
            <Menus routes={props.route.routes} />
          </Sider>
          <Content className={styles.site_layout}><div>{props.children}</div></Content>
        </Layout>
      </Layout>
    </>
  );
}

export default connect(({ global }) => ({
  global,
}))(BasicLayout);